/**
 * @Description:
 * @author TangYong
 * @date 2022/12/16
 */
import {
    Animated,
    StyleSheet,
    Modal,
    Text,
    Dimensions,
    View,
    TouchableWithoutFeedback,
    TouchableOpacity,
} from 'react-native';
import PropTypes from 'prop-types';

// 引入react
import React, {useState, useEffect, useCallback} from 'react';
import {BrLine} from './settingComponent/BrLine';

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

export class Drawer extends React.Component {
    constructor(props) {
        super(props);

        const {visible, position, onShow, dismiss} = this.props;

        this.state = {
            visible: this.props.visible,
            position: 'position',
        };
    }

    _dismiss = () => {
        this.props.dismiss();
    };
    _onShow = () => {
        this.props.onShow();
    };

    //生命周期：组件挂载后
    componentDidMount() {
    }

    //方法

    //DOM
    render() {

        return (

            <Animated.View
                style={style.container}>
                <Modal
                    animationType={'slide'}
                    transparent={true}
                    visible={this.props.visible}
                    onRequestClose={() => this._dismiss()}>
                    <View style={{width, height, position: 'absolute'}}>
                        <TouchableWithoutFeedback onPress={() => this._dismiss()}>
                            <View style={{
                                position: 'absolute',
                                width,
                                height,
                                top: 0,
                                left: 0,
                                backgroundColor: 'rgba(0,0,0,.5)',
                            }}/>
                        </TouchableWithoutFeedback>
                        <View style={style.drawer}>
                            <View style={style.drawerTop}>
                                <TouchableOpacity>
                                    <Text   onPress={() => this._dismiss()}
                                          style={{marginLeft: 10, fontSize:16,color: '#409EFF'}}>取消</Text>
                                </TouchableOpacity>
                                <TouchableOpacity>
                                    <Text onPress={() => this._onShow()}
                                          style={{marginRight: 10, fontSize:16, color: '#409EFF'}}>确认</Text>
                                </TouchableOpacity>
                            </View>
                            <BrLine></BrLine>

                            {this.props.children}
                        </View>
                    </View>
                </Modal>
            </Animated.View>
        );
    }

}

const style = StyleSheet.create({
    drawer: {
        position: 'absolute',
        //top: 0,
        bottom: 0,
        width: width,
        paddingBottom: 20,
        // height: height,
        backgroundColor: '#FFF',
    },
    drawerTop: {
        display: 'flex',
        flexDirection: 'row',
        padding: 10,
        justifyContent: 'space-between',
        borderBottom: 30,
    },
});

// Drawer.propTypes = {
//     visible: PropTypes.bool, // 显示状态
//     onShow: PropTypes.func, // 显示回调
//     dismiss: PropTypes.func, // 影藏回调
//     position: PropTypes.oneOf(['none', 'slide', 'fade']), // 抽屉出现的位置
// };
//
// Drawer.defaultProps = {
//     visible: false,
//     onShow: () => {
//     },
//     dismiss: () => {
//     },
//     position: 'slide',
// };
//
// module.exports = Drawer;

